<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import HeaderComponent from '@/components/Header.vue';
import FooterComponent from '@/components/Footer.vue';

import "@/assets/css/global.css";
// 照片
const mainCamBigger = new URL('@/assets/images/main_cam_bigger.PNG', import.meta.url).href;
const thirdDin = new URL('@/assets/images/third_din.PNG', import.meta.url).href;
const fifthDin = new URL('@/assets/images/fifth_din.PNG', import.meta.url).href;
const southCamBigger = new URL('@/assets/images/south_cam_bigger.PNG', import.meta.url).href;
const secondDin = new URL('@/assets/images/second_din.PNG', import.meta.url).href;
const newCamBigger = new URL('@/assets/images/new_cam_bigger.PNG', import.meta.url).href;
const newDin = new URL('@/assets/images/new_din.PNG', import.meta.url).href;

const newCamMain = new URL('@/assets/images/new_cam_main.PNG', import.meta.url).href;
const southCamMain = new URL('@/assets/images/south_cam_main.PNG', import.meta.url).href;
const mainCamMain = new URL('@/assets/images/main_cam_main.PNG', import.meta.url).href;
const background = new URL('@/assets/images/background.png', import.meta.url).href;
</script>
<template>
<HeaderComponent />
<div id="Main">
    <div id="Sidebar">
      <div id="SidebarContent">
        <router-link :to="{ name: 'Category', params: { categoryId: 'MAIN' } }">
          <img :src="mainCamBigger" class="sideImg" id="sideImg1" />
        </router-link>
        <div class="hidden"><span class="words" id="words1">Come and choose now!</span></div>
        <br />
        <img :src="thirdDin" />
        <img :src="fifthDin" />
        <br />

        <router-link :to="{ name: 'Category', params: { categoryId: 'SOUTH' } }">
          <img :src="southCamBigger" class="sideImg" id="sideImg2" />
        </router-link>
        <div class="hidden"><span class="words" id="words2">Come and choose now!</span></div>
        <br />
        <img :src="secondDin" />
        <br />

        <router-link :to="{ name: 'Category', params: { categoryId: 'NEW' } }">
          <img :src="newCamBigger" class="sideImg" id="sideImg3" />
        </router-link>
        <div class="hidden"><span class="words" id="words3">Come and choose now!</span></div>
        <br />
        <img :src="newDin" />
        <br />
      </div>
    </div>

    <div id="MainImage">
        <div id="MainImageContent">
        <div id="NewImg">
          <router-link :to="{ name: 'Category', params: { categoryId: 'NEW' } }">
            <img :src="newCamMain" width="150px" height="40px" class="new" id="newIcon" />
          </router-link>
        </div>

        <div id="SouthImg">
          <router-link :to="{ name: 'Category', params: { categoryId: 'SOUTH' } }">
            <img :src="southCamMain" width="150px" height="40px" class="south" id="southIcon" />
          </router-link>
        </div>

        <div id="MainImg">
          <router-link :to="{ name: 'Category', params: { categoryId: 'MAIN' } }">
            <img :src="mainCamMain" width="150px" height="40px" class="main" id="mainIcon" />
          </router-link>
        </div>

        <img :src="background" width="360" height="355" />
      </div>
    </div>

    <div id="Separator">&nbsp;</div>

    <!-- 商品悬浮窗 -->
    <div id="productInfo">123</div>
  </div>
  <FooterComponent />
</template>
<style scoped>
</style>